<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>

    <style>
        .div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 50px auto;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: pink;
            z-index: 999;
        }
    </style>
</head>
<body>
<div class="div">
    我是div标签
    <p>我是div内的p标签</p>
</div>
<script src="jquery-3.6.0.js"></script>
<script>
    /*
        1.on()方法绑定事件
          1-1.基础绑定事件
            语法：元素集合.on('事件类型',事件处理函数)
          1-2.事件委托绑定事件
            语法：元素集合.on('事件类型',选择器,事件处理函数)
          1-3.批量判定事件
            语法：元素集合.on({ 事件类型1：处理函数，事件类型2：处理函数 })
            注意：不能进行事件委托
     */

    //1-1.
    // $('div').on('click', function () {
    //     console.log('我是div绑定的点击事件')
    // })

    /*
      1-2.
        作用：把事件绑定给div元素，当你在div内的p元素触发事件的时候，div执行事件处理函数
        => 也就是事件委托，将p元素的事件委托给div元素绑定
    */
    // $('div').on('click', 'p', function () {
    //     console.log('我是p委托给div的绑定事件')
    // })

    //1-3.
    // $('div').on({
    //     click:function () {
    //         console.log('我是点击事件')
    //     },
    //     mouseover:function () {
    //         console.log('我是鼠标移入事件')
    //     },
    //     mouseout:function () {
    //         console.log('我是鼠标移出事件')
    //     }
    // })


    /*
        2.one()方法绑定事件
          与on()方法绑定事件的方式一样
          区别：one 方法绑定的事件，只能执行一次
     */

    //2-1.基础绑定事件
    // $('div').one('click', function () {
    //     console.log('我是div绑定的点击事件')
    // })

    //2-2.事件委托绑定事件
    // $('div').one('click', 'p', function () {
    //     console.log('我是p委托给div的绑定事件')
    // })

    //2-3.批量绑定事件
    // $('div').one({
    //     click:function () {
    //         console.log('我是点击事件')
    //     },
    //     mouseover:function () {
    //         console.log('我是鼠标移入事件')
    //     },
    //     mouseout:function () {
    //         console.log('我是鼠标移出事件')
    //     }
    // })


    /*
        3.hover()方法绑定事件
          注意：是 jQuery 里面一个特殊的事件
          语法：元素集合.hover(移入时触发的函数，移出时触发的函数)
               当只有一个函数时，移入移出都会触发该事件
     */
    // $('div').hover(
        // function () {
        //     console.log('移入时触发')
        // },
        // function () {
        //     console.log('移出时触发')
        // }
    // function () {
    //     console.log('移入移出都时触发')
    // }
    // )


    /*
        4.常用事件函数
          jQuery 把我们最常用到的一些事件，单独做成了事件函数，我们可以直接通过调用这些事件函数，来达到绑定事件的效果
          比如click()，mouseover()，mouseout()，change()...
     */
    $('div').click(function () {
        console.log('点击事件')
    })

</script>
</body>
</html>